<template>
<div id="app">
<transition name="appTab" mode="out-in">
  <router-view class="contBox"/>
</transition>
</div>
</template>

<script>
export default {
  name:'App',
  data:()=>({
  }),
  watch:{
  },
  mounted(){
    this.dataShowFn();
  },
  methods:{
    dataShowFn(){
      this.http(this.api.coupon_share,{
        url:window.location.href
      }).then(res=>{
        switch(parseInt(res.data.ret,10)){
          case 0:
            this.wxSdk.config({
              appId:res.data.data.share.appId,
              timestamp:res.data.data.share.timestamp,
              nonceStr:res.data.data.share.noncestr,
              signature:res.data.data.share.signature,
              jsApiList:[
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
              ]
            });
            let wxConfig={
              title:res.data.data.share.share_title, // 分享标题
              desc:res.data.data.share.share_desc, // 分享描述
              link:res.data.data.share.share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:res.data.data.share.share_img , // 分享图标
              success:()=>{
                Toast(' 分享成功');
              }
            };
            this.wxSdk.ready(()=>{
              this.wxSdk.onMenuShareTimeline(wxConfig);
              this.wxSdk.onMenuShareAppMessage(wxConfig);
              this.wxSdk.onMenuShareQQ(wxConfig);
              this.wxSdk.onMenuShareWeibo(wxConfig);
            })
            break;
          default:
            Toast(res.data.msg);
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss">
@import "assets/css/reset.css";
@import "assets/css/common.scss";
html,body{
  overflow:hidden;
  height:100%;
}
body{
  font-size:28px;
  #app{
    height:100%;
    background-color:#004fa9;
    display:flex;
    flex-direction:column;
    .contBox{
      flex:1;
      display:flex;
      flex-direction:column;
    }
  }
}
.appTab-enter-active,.appTab-leave-active{
  transition:all .2s;
}
.appTab-enter{
  transform:translateX(-30px);
  opacity:0;
}
.appTab-enter-to{
  transform:translateX(0);
  opacity:1;
}
.appTab-leave{
  transform:translateX(0);
  opacity:1;
}
.appTab-leave-to{
  transform:translateX(30px);
  opacity:0;
}
</style>
